<template>
  <div class="item-list">
    <ul v-if="list">
      <li
        v-for="(item,index) in list"
        :key="index"
        @click="itemClick(index)"
        :class="{active: isActive === routerList[index]}"
      >{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    fatherRouter: {
      type: String,
      default: null
    },
    list: {
      type: Array,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      isActive: null,
      routerList: ['recommend', 'toplist', 'playlist', 'djradio', 'artist', 'album']
    }
  },
  methods: {
    itemClick(index) {
      // 鼠标点击改变样式
      this.isActive = this.routerList[index];
      // 改变路由
      this.$router.push('/' + window.location.pathname.split('/')[1] + '/' + this.routerList[index])
    }
  },
  created() {
    // 修复bug,刷新导致从新创建组件时，isActive会被重置
    this.isActive = window.location.pathname.split('/')[2]
  },
  updated() {
    // 修复bug,通过页面内链接跳转时，isActive不会随之更改
    this.isActive = window.location.pathname.split('/')[2]
  }
};
</script>

<style scoped>
.item-list {
  width: 100vw;
  min-height: 5px;
  background-color: #c20c0c;
}

ul {
  height: 35px;
  width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

li {
  float: left;
  text-align: center;
  padding: 3px 13px;
  margin: 0 20px;
  border-radius: 20px;
}

.active,
li:hover {
  background-color: #9b0909;
}
</style>